{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webssh</title>


    <link rel="icon" href="{% static "webssh/favicon.ico" %}"/>
    <link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet" media="all">
    <!-- xterm v4 版本后去掉了 zmodem 插件，只能直接使用 zmodem.js 实现，但是不知道什么原因，登陆 webssh 后，第一次输出命令
    回车后会卡顿一下才出数据，v3.14.5 就不会卡顿，v3.14.5还可以也可以直接使用 zmodem.js，所以这里使用 v3.14.5，终端功能方面
    v3 和 v4 我没发现有什么多大的差别
    -->
    <!--link rel="stylesheet" href="/static/xterm/4.4.0/xterm.css"/-->
    <link href="{% static "webssh/xterm/3.14.5/xterm.min.css" %}" rel="stylesheet" media="all">
    <style>
        .input-width {
            width: 20%;
            display: inline-block;
        }

        .hide {
            display: none;
        }
    </style>

    <script>
        function checkwindow() {
            event.returnValue = false;
        }

    </script>
    <script src="{% static "js/jquery-3.6.0.min.js" %}"></script>
    <script type="text/javascript" src="{% static "js/getUrlParam.js" %}"></script>   <!-- 获取 url 携带的值 -->
    <!-- url 参数 跳转 加密 -->
    <script src="{% static "crypto4.1.1js/crypto-js.js" %}"></script>

</head>
<!--body onbeforeunload="checkwindow()"-->
<body>

<div style="margin-top: 10px" id="form">
    <form class="form-horizontal">
        {% csrf_token %}
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">

                    <input type="hidden" name="host" class="form-control" id="host">
                    <input type="hidden" name="user" class="form-control" id="user" placeholder="user">
                    <input type="hidden" class="form-control" id="password" placeholder="password">

                    <input type="button" class="btn btn-success" value="欢迎使用简易版webssh~" id="login"
                           onclick="websocket()">
                </div>
            </div>

        </div>

    </form>
</div>

<div id="django-webssh-terminal" class="hide">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins" id="id-box">
                <div class="ibox-content" id="id-ssh-content" style="padding: 0;">
                    <p style="position:absolute; padding: 0; right:0; margin-right:17px; text-align: center; z-index: 999">
                        <button class="btn btn-danger btn-sm" id="id-close-conn">关闭连接</button>
                    </p>
                    <div id="terminal"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- url 参数 跳转 加密 -->
<script src="/static/crypto4.1.1js/crypto-js.js"></script>
<script>

    var aseKey_temp = ''
    var csrf_token = $("input[name='csrfmiddlewaretoken']").val();
    $.ajax({
        //几个参数需要注意一下
        type: "post",  //方法类型
        url: "/resKey/",  // 跳转的url
        dataType: "json",
        async: false,
        data: {
            'csrfmiddlewaretoken': csrf_token
        },
        traditional: true,
        success: function (res) {
            aseKey_temp = res.aseKey;

        },
    });

    <!-- 获取ajex通过url传过来的值-这样子很危险的应该 -->
    var r_user_temp = UrlParam.paramValues("r_user");
    var r_password_temp = UrlParam.paramValues("r_password");
    var hostid_temp = UrlParam.paramValues("hostid");

    //console.log(r_password_temp[0])   // ['bT2yT9inXSKUBQ91w']  列表取出 [0]
    var password_decrypt = CryptoJS.AES.decrypt(r_password_temp[0], CryptoJS.enc.Utf8.parse(aseKey_temp), {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
    }).toString(CryptoJS.enc.Utf8);


    window.onload = function () {
        var psel_hostid = document.getElementById("host");
        psel_hostid.value = hostid_temp; //设置 值
        var psel_user = document.getElementById("user");
        psel_user.value = r_user_temp; //设置
        var psel_pwd = document.getElementById("password");
        psel_pwd.value = password_decrypt; //设置

    };

    //  自动点击
    setTimeout(function () {
            // IE
            if (document.all) {
                document.getElementById("login").click();
            }
            // 其它浏览器
            else {
                var e = document.createEvent("MouseEvents");
                e.initEvent("click", true, true);
                document.getElementById("login").dispatchEvent(e);
            }
        }, 1000
    );
</script>

<script src="{% static "webssh/jquery/3.4.1/jquery.min.js" %}"></script>
<script src="{% static "webssh/bootstrap/3.3.7/bootstrap.min.js" %}"></script>
<script src="{% static "webssh/bootbox/5.4.0/bootbox.min.js" %}"></script>
<!--script src="/static/xterm/4.4.0/xterm.min.js"></script-->
<script src="{% static "webssh/xterm/3.14.5/xterm.min.js" %}"></script>
<script src="{% static "webssh/zmodem/zmodem.devel.js" %}"></script>
<script src="{% static "webssh/webssh.js" %}"></script>

</body>
</html>